<template>
  <div class="lineStatisticBox board-border">
    <div class="lineBox">
      <NormalLine :lineData="lineData"></NormalLine>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import api from '@api/api';
import { getRoleId, buildDateAxis } from '@/unit/tool';
// import { RepairType } from '@/unit/constantValue';
import NormalLine from '@components/echart/normalLine';
import '@assets/styles/publicStyle/index.less';

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('board/');

function transformTimeArray(lists) {
  return lists.map((item, index) => {
    return {
      value: [item.name, item.value],
    };
  });
}

function buildLineLists(LineDataLists, option) {
  let { startTime, endTime, timeFormat } = option;
  let lineDataLists = [];
  let legendData = [];
  let xAxisData = buildDateAxis({ timeFormat, startTime, endTime });

  lineDataLists.push({
    option: {
      // name: 'key',
      symbolSize: 10,
    },
    data: transformTimeArray(LineDataLists),
  });

  return {
    grid: { left: '80', right: '30', top: '50' },
    legend: {
      data: [],
    },
    yAxis: {
      type: 'value',
      // y 轴线
      axisLine: {
        show: false,
      },
      // 分割线设置
      splitLine: {
        show: true,
        lineStyle: {
          color: '#708ACC',
          width: 0.5,
        },
      },
      //
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#708ACC',
          fontSize: 14,
        },
      },
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        textStyle: {
          color: '#708ACC',
          fontSize: 14,
        },
      },
    },
    dataLists: lineDataLists,
  };
}

function isDayOrMouth(startTime, endTime) {
  let a = moment(startTime);
  let b = moment(endTime);
  return b.diff(a, 'months') > 0;
}

export default {
  name: 'lineStatistic',
  components: {
    NormalLine,
  },
  props: {},
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      lineData: {},
    };
  },
  watch: {
    timeSwich: function(newValue, oldValue) {
      let { startTime, endTime } = newValue;
      let isMouth = isDayOrMouth(startTime, endTime);
      if (isMouth) {
        this.boardMonthProduceSum({ startTime, endTime }, 'lineData', 'months');
      } else {
        this.boardDayProduceSum({ startTime, endTime }, 'lineData', 'days');
      }
    },
  },
  computed: {
    ...mapState(['timeSwich']),
  },
  methods: {
    // 获取机床某时间段内的各个状态时间
    async boardDayProduceSum(parames, key, timeFormat) {
      const resData = await api.boardDayProduceSum({ UserName: this.userName, compid: this.compId, ...parames });

      let { startTime, endTime } = parames;

      let dataLists = [];
      let timeOption = {
        startTime,
        endTime,
        timeFormat,
      };

      dataLists = resData.map((item, index) => {
        return {
          name: item.day,
          value: item.num,
        };
      });

      this[key] = buildLineLists(dataLists, timeOption);
    },

    // 获取机床某时间段内的各个状态时间(月为单位)
    async boardMonthProduceSum(parames, key, timeFormat) {
      const resData = await api.boardMonthProduceSum({ UserName: this.userName, compid: this.compId, ...parames });

      let { startTime, endTime } = parames;

      let dataLists = [];
      let timeOption = {
        startTime,
        endTime,
        timeFormat,
      };

      dataLists = resData.map((item, index) => {
        return {
          name: item.day,
          value: item.num,
        };
      });

      this[key] = buildLineLists(dataLists, timeOption);
    },
  },
  created() {},
  mounted() {
    getRoleId(this);
  },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
